@php
    $k = 0;
    $j = 0;
@endphp
@if(empty($options['value']))
    <div style="position:relative">
        <span class="span-X"><a><i class="fa fa-close"></i></a></span>
        <div>
            <div class="form-group" style="margin:10px 0px;">
                {!! Form::customLabel($name."[$k][name]", "属性", $options['label_attr']) !!}
                {!! Form::input("text", $name."[$k][name]", "", ['class' => "form-control attr-name", 'style' => "width:500px", 'required' => "required", "data-attr-id" => "$k"]) !!}
            </div>
            <div class="form-group" style="margin:10px 0px;">
                {!! Form::customLabel($name."[$k][sort]", "排序权重", $options['label_attr']) !!}
                {!! Form::input("text", $name."[$k][sort]", 0, ['class' => "form-control", 'required' => "required"]) !!}
            </div>
            {!!  Form::input('button', 'increase_text_add', "添加规格", ['class' => "btn btn-primary btn-xs increase_text_add", 'style' => "margin: 20px 5px;", 'data-attr-id' => 0]) !!}
        </div>
        <div class="attr-value" data-attr-id="{{ $k }}" style="position:relative">
            <div class="form-group" style="margin:10px 0px;">
                {!! Form::customLabel($name."[$k][value][$j]", "属性值", $options['label_attr']) !!}
                {!! Form::input("text", $name."[$k][value][$j]", "", ['data-value-id' => "$k", 'required' => "required", 'class' => "form-control"]) !!}
                <span class="span-X2" data-id="{{ $j }}"><a><i class="fa fa-close"></i></a></span>
            </div>
        </div>
        <div style="clear: both"></div>
        <hr />
    </div>
@else
    @foreach($options['value'] as $item)
        <div style="position:relative">
            <span class="span-X"><a><i class="fa fa-close"></i></a></span>
            <div>
                <div class="form-group" style="margin:10px 0px;">
                    {!! Form::customLabel($name."[$k][name]", "属性", $options['label_attr']) !!}
                    {!! Form::input("text", $name."[$k][name]", $item['name'], ['class' => "form-control attr-name", 'style' => "width:500px", 'required' => "required", "data-attr-id" => "$k"]) !!}
                </div>
                <div class="form-group" style="margin:10px 0px;">
                    {!! Form::customLabel($name."[$k][sort]", "排序权重", $options['label_attr']) !!}
                    {!! Form::input("text", $name."[$k][sort]", $item['sort'], ['class' => "form-control", 'required' => "required"]) !!}
                </div>
                {!!  Form::input('button', 'increase_text_add', "添加规格", ['class' => "btn btn-primary btn-xs increase_text_add", 'style' => "margin: 20px 5px;", 'data-attr-id' => $k]) !!}
            </div>
            <div class="attr-value" data-attr-id="{{ $k }}" style="position:relative">
                @foreach($item['value'] as $item2)
                    <!-- <div style="position:relative"> -->
                        <div class="form-group" style="margin:10px 0px;">
                            {!! Form::customLabel($name."[$k][value][$j]", "属性值", $options['label_attr']) !!}
                            {!! Form::input("text", $name."[$k][value][$j]", $item2, ['data-value-id' => "$k", 'required' => "required", 'class' => "form-control"]) !!}
                            <span class="span-X2" data-id="{{ $j }}"><a><i class="fa fa-close"></i></a></span>
                        </div>
                    <!-- </div> -->
                    @php
                        $j ++;
                    @endphp
                @endforeach
            </div>
            <div style="clear: both"></div>
            <hr />
            @php
                $k ++;
            @endphp
        </div>
    @endforeach
@endif

{!!  Form::input('button', 'increase_area_add', "添加属性", ['class' => "btn btn-primary btn-sm", 'style' => "margin: 20px 5px;", 'id' => "increase_area_add"]) !!}

@push('scripts')
    <script>

        var k = {{ $k }};
        var j = {{ $j }};

        $(document).on('click', '.increase_text_add',function () {
            j += 1;
            k = Number($(this).attr('data-attr-id'));
            var node = getText(k, j);
            $(".attr-value[data-attr-id='"+ k +"']").append(node);
            var tmp = "{{ $name }}["+ k +"][value]["+ j +"]";
            $("input[name='" + tmp +"']").focus();
        });

        $('#increase_area_add').on('click', function () {
            k += 1;
            j += 1;
            var node = getArea(k, j);
            $(this).before(node);
            var tmp = "{{ $name }}["+ k +"][name]";
            $("input[name='" + tmp +"']").focus();
        });

        $(document).on('click', ".span-X2", function () {
            $(this).parent().remove();
        });

        $(document).on('click', ".span-X", function () {
            $(this).parent().remove();
        });

        function getText(k, j) {
            return "<div style='margin:10px 0px;' class=\"form-group\">\n" +
                "   <label style='width:80px;text-align:center' for=\"{{ $name }}["+ k +"][value]["+ j +"]\" class=\"control-label required\">属性值</label>\n" +
                "   <input data-value-id=\""+ k +"\" required=\"required\" class=\"form-control\" name=\"{{ $name }}["+ k +"][value]["+ j +"]\" type=\"text\" value=\"\" id=\"{{ $name }}["+ k +"][value]["+ j +"]\">\n" +
                "   <span class=\"span-X2\" data-id=\""+ k +"\"><a><i class=\"fa fa-close\"></i></a></span>\n" +
                "</div>";
        }
        function getArea(k, j) {
            return "<div style=\"position:relative\">\n" +
                "   <span class=\"span-X\"><a><i class=\"fa fa-close\"></i></a></span>\n" +
                "   <div>\n" +
                "       <div class=\"form-group\">\n" +
                "           <label style='width:80px;text-align:center' for=\"{{ $name }}["+ k +"][name]\" class=\"control-label required\">属性</label>\n" +
                "           <input class=\"form-control attr-name\" style='width:500px' required=\"required\" data-attr-id=\""+ k +"\" name=\"{{ $name }}["+ k +"][name]\" type=\"text\" value=\"\" id=\"{{ $name }}["+ k +"][name]\">\n" +
                "       </div>\n" +
                "       <div style='margin:10px 0px;' class=\"form-group\">\n" +
                "           <label style='width:80px;text-align:center' for=\"{{ $name }}["+ k +"][sort]\" class=\"control-label required\">排序权重</label>\n" +
                "           <input class=\"form-control\" required=\"required\" name=\"{{ $name }}["+ k +"][sort]\" type=\"text\" value=\"\" id=\"{{ $name }}["+ k +"][sort]\">\n" +
                "       </div>\n" +
                "       <input class=\"btn btn-primary btn-xs increase_text_add\" style=\"margin: 20px 5px;\" data-attr-id=\""+ k +"\" name=\"increase_text_add\" type=\"button\" value=\"添加规格\">\n" +
                "   </div>\n" +
                "   <div class=\"attr-value\" data-attr-id=\""+ k +"\" style=\"position:relative\">\n" +
                         getText(k, j) +
                "   </div>\n" +
                "   <div style=\"clear: both\"></div>\n" +
                "   <hr>\n" +
                "</div>";
        }
    </script>
    <script>
        // $('.content').find('form').find('label').attr('style', 'width:80px;text-align:center')
        // $('.form-group').attr('style', 'margin:10px 0px;')
    </script>
@endpush
@push('stylesheets')
    <style>
        .span-X {
            /*position: absolute;*/
            border-radius: 10px;
            /*top: -8px;*/
            /*right: -8px;*/
            padding: 3px;
            line-height: 0;
            background-color: rgba(190,190,190,0.50);
        }
        .span-X2 {
            /*position: absolute;*/
            /*top: 2px;*/
            /*right: 2px;*/
            border-radius: 10px;
            background-color: rgba(190,190,190,0.50);
        }
    </style>
@endpush
